/*
 * @(#) PageBar.js
 *
 * <br> Copyright:  Copyright (c) 2017
 * <br>
 * <br> @author caijinhuang
 * <br> 2017-12-06 14:29:07
 */
import React, { Component } from 'react';
import '../../../css/pageBar.css'
/* ================================================================================
 * 两个参数：
 * total：总页数
 * showPage：分页查询执行函数，重新获取列表内容
 * ================================================================================ */
class PagingBar extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            current: 1,
            isOpen:1,
            title:"",
            value : '',
            totalPage:this.props.total,//总页数
        };
        console.log(this.state.totalPage);
    }

    /*重置页号*/
    pageReset(){
        this.setState({current:1});
    }

    /*设置总页数*/
    setTotalPage(total,title,isOpen){
        this.setState({totalPage:total,title:title,isOpen:isOpen});
    }

    handClick(e){
        let sel = this;
        this.props.showPage !== null ? this.props.showPage(e,this.state.title,this.state.isOpen):console.log("未定义函数，无法分页");//showPage为外部函数，需要传值
        sel.setState({current : e});
    }
    handChange(e){
        console.log("handChange(e)执行");
        // this.props.showPage !== null ? this.props.showPage(e,this.state.title,this.state.isOpen):console.log("未定义函数，无法分页");//showPage为外部函数，需要传值
        this.setState({value : e.target.value})
    }
    goNext(){
        console.log("goNext执行");
        let cur = this.state.current;
        if(cur < this.props.total){
            this.setState({current : cur + 1});
            console.log(this.state.current);
            console.log(cur);
            this.props.showPage !== null ? this.props.showPage(this.state.current+1,this.state.title,this.state.isOpen):console.log("未定义函数，无法分页");//showPage为外部函数，需要传值
        }
    }
    goPrev(){
        console.log("goPrev执行");
        let cur = this.state.current;
        if(cur > 1){
            this.setState({current : cur - 1});
            this.props.showPage !== null ? this.props.showPage(this.state.current-1,this.state.title,this.state.isOpen):console.log("未定义函数，无法分页");//showPage为外部函数，需要传值
        }
    }
    goPage(){
        var val = this.state.value;
        if(!/^[1-9]\d*$/.test(val)){
            alert('页码只能输入大于1的正整数');
            // this.setState({current : val});
        }else if(parseInt(val) > parseInt(this.state.totalPage)){
            alert('没有这么多页');
        }else{
            this.props.showPage !== null ? this.props.showPage(val,this.state.title,this.state.isOpen):console.log("未定义函数，无法分页");//showPage为外部函数，需要传值
            this.setState({current : val});
        }
    }


    render(){
        let self = this;
        let total = this.state.totalPage;//总页数
        let cur = this.state.current;//当前页码
        let items = [];
        let begin;
        let len;
        if(total > 5){
            len = 5;
            if(cur >= (total-2)){
                begin = total - 4;
            }else if(cur <= 3){
                begin = 1;
            }else{
                begin = cur - 2;
            }
        }else{
            len = total;
            begin = 1;
        }
        for(let i = 0; i < len; i ++){
            let cur = this.state.current;
            let showI = begin + i;
            if(cur == showI){
                items.push({num : showI, cur : true});
            }else{
                items.push({num : showI, cur : false});
            }

        }
        return  <div className="ui-pagnation">
            <a className={this.state.current == 1? 'prev disable' : 'prev'} onClick={this.goPrev.bind(this)}></a>
            <span className="pagnation-cols">
                            {
                                items.map(function(item){

                                    return <a onClick={()=>self.handClick(item.num)} className={item.cur? 'num current' : 'num'}>{item.num}</a>
                                })
                            }
                        </span>
            <a className={this.state.current == this.props.total? 'next disable' : 'next'} onClick={this.goNext.bind(this)}></a>
            <div className="fl">
                共
                <span className="num-total">{total}</span>
                页，到第
                <input type="text" value={self.state.value} onChange={this.handChange.bind(this)} />
                页
            </div>
            <a onClick={this.goPage.bind(this)} className="page-go">确定</a>
        </div>
    }
}
export default PagingBar